<template>
	<view class="content">
		<input type="text" placeholder="请输入内容" v-model="inputValue" />
		<button type="default" @click="addItem">添加</button>
	</view>
	<view class="g-list">
		<todo-item :content="message"></todo-item>
	</view>
</template>

<script setup>
	import TodoItem from '../../components/TodoItem.vue'
	import {ref} from 'vue'
	const inputValue = ref('')
	const message = ref('')
	const addItem = ()=>{
		message.value = inputValue.value
		inputValue.value = ''
	}
	// import TodoItem from '../../components/TodoItem.vue'
	// export default{
	// 	components:{
	// 		TodoItem
	// 	},
	// 	data(){
	// 		return{
	// 			inputValue:'',
	// 			message:'hello'
	// 		}
	// 	},
	// 	methods:{
	// 		addItem(){
	// 			this.message = this.inputValue
	// 			console.log('addItem >>> ',this.message);
	// 			this.inputValue = ''
	// 		}
	// 	}
	// }
	
</script>

<style lang="scss">
	.content{
		display: flex;
		padding: 10px;
		input{
			flex: 1;
			border: 1px solid yellowgreen;
			height: 40px;
		}
		button{
			width: 100px;
		}
	}
</style>
